<template>
  <div>
    <enclosureUpload @changeImg="changeImg" :formItem="compConfig" :formNamePath="props.formNamePath"></enclosureUpload>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick, computed } from "vue";
import enclosureUpload from "../../formitem/enclosureUpload/index.vue";
import formItemForm from "./config";
import { useModelStore } from "@/store/modules/model/column";
import { useColumnModel } from '@/components/draggable/hooks/useColumnModel';
// import { nextTick } from "process";
const useModel = useModelStore();
const props = defineProps({
  element: [],
  formNamePath: []
})
console.log(props.element, 99213);
const compConfig = ref(JSON.parse(JSON.stringify(formItemForm.component.settings)));
useColumnModel(compConfig, computed(() => props.element));
const formItem = ref(formItemForm as any);
const changeImg = (data: [], id: any) => {
  if (data) {
    let i = formItem.value.component.settings.value.findIndex(
      (item: any) => item.id == id
    );
    if (i == -1) {
      formItem.value.component.settings.value.push(...data);
    } else {
      formItem.value.component.settings.value.splice(i, 1, ...data);
    }
  }

  useModel.setData({
    param: formItemForm.component.settings.param,
    value: data,
  });
};
</script>

<style lang="less" scoped></style>
